<template>
  <el-row type="flex" align="middle">
    <el-image v-if="icon" class="img" :src="icon" />
    <span class="title">{{ title }}</span>
    <el-dropdown trigger="click" @command="changeOrderTime">
      <span class="el-dropdown-link">
        {{ timeText }}
        <i class="el-icon-arrow-down el-icon--right" />
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item v-for="item in timeList" :key="item.value" :command="item.value">{{ item.title }}</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </el-row>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: '统计'
    },
    icon: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      timeList: [{ title: '今天', value: 'today' }, { title: '最近一周(7天)', value: 'week' }, { title: '最近一月(30天)', value: 'month' }],
      // 默认显示时间
      timeText: '今天'
    };
  },
  methods: {
    changeOrderTime: function(time) {
      this.$emit('change', time);
      const item = this.timeList.find(item => item.value == time);

      this.timeText = item.title;
    }
  }
};
</script>

<style scoped>
.img {
  margin-right: 8px;
}
.title {
  margin-right: 10px;
}
.el-dropdown {
  margin-left: auto;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
</style>
